<template>
  <div class="applet">
    <!-- <div class="el-dialog__wrapper company exhibition" style="z-index: 2016;" v-if="dialogVisible">
      <div
        role="dialog"
        aria-modal="true"
        aria-label="环节配置"
        class="el-dialog"
        style="margin-top: 15vh; width: 414px;"
      >
        <div class="exhibition-H5">
          <div class="exhibition-H5_top">
            <img src="../../../assets/images/tab.png" alt width="100%" />
            <div class="exhibition-H5_tab">
              <i class="el-icon-arrow-left"></i>
              <p>{{bageList[0].shopName}}</p>
            </div>
          </div>
          <div class="exhibition-H5_title">
            <div
              v-if="bageList[0].children[3].value == 1 && bageList[0].children[0].state"
            >{{bageList[0].children[0].value}}</div>
            <div
              v-if="bageList[0].children[3].value != 1 && bageList[0].children[1].state"
            >{{bageList[0].children[1].value}}</div>
          </div>
          <img :src="bageList[0].banner" width="100%" style="zIndex:-1;" />
          <div class="exhibition-H5_main">
            <div class="exhibition-H5_content">
              <p class="exhibition-H5_contenTop">查询信息</p>
              <div class="exhibition-H5_contentCn">
                <p>
                  <span>您查询的是</span>
                  {{bageList[0].shopName}}
                </p>
                <p v-if="bageList[0].children[2].state">
                  <span>溯源码</span>
                  {{bageList[0].children[2].value}}
                </p>
                <p v-if="bageList[0].children[3].state">
                  <span>查询次数</span>
                  第{{bageList[0].children[3].value}}次查询
                </p>
                <p v-if="bageList[0].children[4].state">
                  <span>首次查询时间</span>
                  {{bageList[0].children[4].value}}
                </p>
                <p v-if="bageList[0].children[5].state">
                  <span>首次查询地点</span>
                  {{bageList[0].children[5].value}}
                </p>
              </div>
            </div>
            <div class="exhibition-H5_content">
              <p class="exhibition-H5_contenTop">商品信息</p>
              <div class="exhibition-H5_contentCn" v-if="bageList[1].state">
                <p>
                  <span>商品名称</span>
                  {{bageList[1].children[0].name}}
                </p>
                <p>
                  <span>商品品牌</span>
                  {{bageList[0].children[2].value}}
                </p>
                <p>
                  <span>商品展示</span>
                  {{bageList[0].children[3].value}}
                </p>
              </div>
              <img src="../../../assets/images/lianjie.png" alt />
            </div>
            <div class="exhibition-H5_content">
              <p class="exhibition-H5_contenTop">生产信息</p>
              <div class="exhibition-H5_contentDn">
                <div v-for="(item,index) in bageList[2].children" :key="index">
                  <div class="contentDn-main" v-if="item.state">
                    <i class="exhibition-H5_line" v-if="index != bageList[2].children.length-1"></i>
                    <span class="contentDn-main_top">
                      <b></b>
                    </span>
                    <div class="contentDn-main_con">
                      <h3>{{item.name}}</h3>
                      <p v-if="index == 0">中国三大富硒村之一的山村，地处安徽省池州市石台县寓山镇境境内的</p>
                      <p v-if="index == 1" style="width:100px;height:100px;background:#ddd;"></p>
                      <span>2020.07.01 07:00:25</span>
                    </div>
                  </div>
                </div>
                <div class="contentDn-main" v-if="bageList[2].children[1].state">
                  <i class="exhibition-H5_line"></i>
                  <span class="contentDn-main_top">
                    <b></b>
                  </span>
                  <div class="contentDn-main_con">
                    <h3>取水</h3>
                    <p style="width:100px;height:100px;background:#ddd;"></p>
                    <span>2020.07.01 07:00:25</span>
                  </div>
                </div>
                <div class="contentDn-main" v-if="bageList[2].children[2].state">
                  <i class="exhibition-H5_line"></i>
                  <span class="contentDn-main_top">
                    <b></b>
                  </span>
                  <div class="contentDn-main_con">
                    <h3>杀菌</h3>
                    <p></p>
                    <span>2020.07.01 07:00:25</span>
                  </div>
                </div>
                <div class="contentDn-main" v-if="bageList[2].children[3].state">
                  <span class="contentDn-main_top">
                    <b></b>
                  </span>
                  <div class="contentDn-main_con">
                    <h3>罐装</h3>
                    <p>123</p>
                    <span>2020.07.01 07:00:25</span>
                  </div>
                </div>
              </div>
              <img src="../../../assets/images/lianjie.png" alt />
            </div>
          </div>
          <div class="exhibition-H5_bottom my-btn">
            <el-button type="primary" icon="el-icon-shopping-cart-2">再次购买</el-button>
            <div class="share">
              <el-button type="primary" icon="el-icon-connection">分享</el-button>
            </div>
          </div>
        </div>
      </div>
      <span
        role="dialog"
        aria-modal="true"
        aria-label="环节配置"
        class="el-dialog"
        style="margin-top: 15vh; width: 552px;"
      >
        <div class="el-dialog__header">
          <span class="el-dialog__title">溯源展示配置</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="el-dialog__body">
          <div class="confi-title">
            <p>展示全部</p>
            <el-switch
              v-model="aaa"
              active-color="#13ce66"
              inactive-color="#ddd"
              @change="changeState(-1)"
            ></el-switch>
          </div>
          <div class="confi-main">
            <div class="confi-content">
              <div class="confi-content_head">
                <span>头部展示</span>
                <i class="el-icon-arrow-down"></i>
              </div>
              <div class="confi-content_dispaly">
                <div
                  class="confi-content_dispalyF"
                  style="justifyContent:flex-start;align-items: flex-start;"
                >
                  <p>头部banner</p>
                  <el-upload
                    class="avatar-uploader"
                    :action="BASE_URL"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    name="myFileName"
                  >
                    <img
                      v-if="bageList[0].banner"
                      :src="bageList[0].banner"
                      class="avatar"
                      width="100"
                    />
                    <div v-else class="upimg">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                  </el-upload>
                </div>
                <div class="confi-content_dispalyF">
                  <p>首次查询提示</p>
                  <el-input v-model="bageList[0].children[0].value" placeholder="官方正品"></el-input>
                  <el-switch
                    v-model="bageList[0].children[0].state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                  ></el-switch>
                </div>
                <div class="confi-content_dispalyF">
                  <p>多次查询提示</p>
                  <el-input v-model="bageList[1].children[0].value" placeholder="多次验证，谨防假冒！"></el-input>
                  <el-switch
                    v-model="bageList[0].children[1].state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                  ></el-switch>
                </div>
                <div class="confi-content_dispalyF">
                  <p>溯源码</p>
                  <el-switch
                    v-model="bageList[0].children[2].state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                  ></el-switch>
                </div>
                <div class="confi-content_dispalyF">
                  <p>查询次数</p>
                  <el-switch
                    v-model="bageList[0].children[3].state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                  ></el-switch>
                </div>
                <div class="confi-content_dispalyF">
                  <p>首次查询时间</p>
                  <el-switch
                    v-model="bageList[0].children[4].state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                  ></el-switch>
                </div>
                <div class="confi-content_dispalyF">
                  <p>首次查询地址</p>
                  <el-switch
                    v-model="bageList[0].children[5].state"
                    active-color="#13ce66"
                    inactive-color="#ddd"
                  ></el-switch>
                </div>
              </div>
            </div>
            <div class="confi-content">
              <div class="confi-content_head confi-content_head1">
                <div>
                  <span>商品信息</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
                <el-switch v-model="bageList[1].state" active-color="#13ce66" inactive-color="#ddd"></el-switch>
              </div>
              <div class="confi-content_dispaly">
                <div class="confi-content_dispalyF">
                  <p>商品名称：富硒山泉水</p>
                </div>
                <div class="confi-content_dispalyF">
                  <p>商品品牌：天石富硒</p>
                </div>
                <div class="confi-content_dispalyF">
                  <p>商品规格：天石富硒</p>
                </div>
              </div>
            </div>
            <div class="confi-content">
              <div class="confi-content_head confi-content_head1">
                <div>
                  <span>溯源环节</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
              </div>
              <div class="confi-content_dispaly">
                <div
                  class="confi-content_dispalyF"
                  v-for="(item,index) in bageList[2].children"
                  :key="index"
                >
                  <p>{{item.name}}</p>
                  <el-switch v-model="item.state" active-color="#13ce66" inactive-color="#ddd"></el-switch>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
            <button type="button" class="el-button el-button--default">
              <span>取 消</span>
            </button>
            <button type="button" class="el-button el-button--primary">
              <span>下一步</span>
            </button>
          </span>
        </div>
      </span>
    </div> -->
  </div>
</template>

<script>
// import { BASE_URL } from "@/utils/service.js";
// export default {
//   data() {
//     return {
//       aaa: false,
//       BASE_URL,
//       dialogVisible: true,
//       bageList: [
//         {
//           title: "头部展示",
//           banner: require("@/assets/images/shop.png"),
//           shopName: "富硒山泉水",
//           children: [
//             {
//               name: "首次查询提示",
//               value: "官方正品",
//               state: false
//             },
//             {
//               name: "多次查询提示",
//               value: "多次验证，谨防假冒！",
//               state: false
//             },
//             {
//               name: "溯源码",
//               value: "1234fdsgf",
//               state: false
//             },
//             {
//               name: "溯源次数",
//               value: 3,
//               state: false
//             },
//             {
//               name: "首次查询时间",
//               value: "2020/06/22 12:00:00",
//               state: false
//             },
//             {
//               name: "首次查询地址",
//               value: "美国 旧金山",
//               state: false
//             }
//           ]
//         },
//         {
//           title: "商品信息",
//           state: false,
//           children: [
//             {
//               name: "富硒山泉水",
//               value: ""
//             },
//             {
//               name: "天石富硒",
//               value: ""
//             },
//             {
//               name: "天石富硒",
//               value: ""
//             }
//           ]
//         },
//         {
//           title: "溯源环节",
//           children: [
//             {
//               name: "生产信息",
//               value: "",
//               state: false
//             },
//             {
//               name: "产地信息",
//               value: "",
//               state: false
//             },
//             {
//               name: "质检报告",
//               value: "",
//               state: false
//             },
//             {
//               name: "物流信息",
//               value: "",
//               state: false
//             }
//           ]
//         }
//       ]
//     };
//   },
//   created() {
//     this.getTraceTemplatePageList();
//   },
//   methods: {
//     async getTraceTemplatePageList() {
//       let obj = {
//         contentType: 1,
//         pageNum: 1,
//         pageSize: 10
//       };
//       const res = await this.axios.getTraceTemplatePageList(obj);
//       console.log(JSON.parse(res.data.data.list[0].content));
//     },
//     handleAvatarSuccess(res, file) {
//       this.companyForm.imgurl = res.data.url;
//     },
//     beforeAvatarUpload(file) {
//       // 上传图片
//       const typeArr = ["image/jpeg", "image/png", "image/gif"];
//       const isLt2M = file.size / 1024 / 1024 < 1;
//       const typeType = typeArr.indexOf(file.type);
//       if (typeType < 0) {
//         this.$message.error("请选择JPG/PNG/GIF格式的图片!");
//       }
//       if (!isLt2M) {
//         this.$message.error("请选择不超过1MB的图片!");
//       }
//       return typeType >= 0 && isLt2M;
//     },
//     changeState(index, i) {
//       if (index == -1 && this.aaa == true) {
//         this.bageList.map(el => {
//           el.state = true;
//           el.children.map(el1 => {
//             el1.state = true;
//           });
//         });
//       } else if (index == -1 && this.aaa == false) {
//         this.bageList.map(el => {
//           el.state = false;
//           el.children.map(el1 => {
//             el1.state = false;
//           });
//         });
//       } else {
//         this.aaa = true;
//         this.bageList.map(el => {
//           el.children.map(el1 => {
//             if (el1.state == false) {
//               this.aaa = false;
//             }
//           });
//         });
//       }
//     }
//   }
// };
</script>

<style lang="scss" scoped>
// .applet {
//   .exhibition {
//     display: flex;
//     justify-content: center;
//     align-items: flex-start;
//     background-color: rgba(0, 0, 0, 0.5);
//     .el-dialog {
//       margin: 0 25px 50px;
//       .el-dialog__header {
//         border-bottom: 1px solid #ddd;
//         .el-dialog__title {
//           font-weight: bold;
//         }
//       }
//       .el-dialog__body {
//         padding-top: 10px;
//         .confi-title {
//           display: flex;
//           justify-content: space-between;
//           font-size: 16px;
//         }
//         .confi-main {
//           border: 1px solid #ddd;
//           padding: 5px 1px;
//           margin: 10px 0;
//           .confi-content {
//             .confi-content_head {
//               font-size: 15px;
//               font-weight: bold;
//               i {
//                 display: inline-block;
//                 margin-left: 15px;
//                 font-weight: bold;
//               }
//             }
//             .confi-content_head1 {
//               display: flex;
//               justify-content: space-between;
//               align-items: center;
//               padding-right: 10px;
//             }
//             .confi-content_dispaly {
//               padding: 10px;
//               .confi-content_dispalyF {
//                 display: flex;
//                 align-items: center;
//                 justify-content: space-between;
//                 margin: 10px 0;
//                 p {
//                   min-width: 100px;
//                 }
//                 /deep/ .el-input__inner {
//                   line-height: 25px;
//                   height: 25px;
//                   width: 70%;
//                 }
//               }
//             }
//           }
//         }
//       }
//       .exhibition-H5 {
//         overflow-y: auto;
//         height: 666px;
//         position: relative;
//         background-color: #f5f5f5;
//         .exhibition-H5_top {
//           position: sticky;
//           top: 0;
//           left: 0;
//           right: 0;
//           background-color: #fff;
//           z-index: 999;
//         }
//         .exhibition-H5_bottom {
//           position: sticky;
//           bottom: 0;
//           left: 0;
//           right: 0;
//           background-color: #fff;
//           z-index: 999;
//           padding: 10px;
//           display: flex;
//           align-items: center;
//           justify-content: center;
//           /deep/ .el-button {
//             border-radius: 18px;
//             i {
//               font-size: 16px;
//             }
//           }
//           .share {
//             margin-left: 15px;
//             /deep/ .el-button {
//               background-color: #ffb31a;
//               border-color: #ffb31a;
//             }
//             /deep/ .el-button--primary.is-active,
//             .el-button--primary:active {
//               background: #da9a1b;
//               border-color: #da9a1b;
//             }
//           }
//         }
//         .exhibition-H5_tab {
//           display: flex;
//           justify-content: space-between;
//           padding: 15px;
//           align-items: center;
//           i {
//             font-weight: bold;
//             font-size: 18px;
//           }
//           p {
//             flex: 1;
//             text-align: center;
//             padding-right: 15px;
//             font-size: 18px;
//             font-weight: bold;
//           }
//         }
//         .exhibition-H5_title {
//           div {
//             background-color: #f8efa7;
//             color: #e76d56;
//             line-height: 24px;
//             text-align: center;
//           }
//         }
//         .exhibition-H5_main {
//           position: relative;
//           margin: -30px 15px 0;
//           .exhibition-H5_content {
//             .exhibition-H5_contenTop {
//               height: 50px;
//               line-height: 50px;
//               margin: 0 auto;
//               padding-left: 15px;
//               background: rgba(246, 252, 251, 1);
//               border-radius: 10px 10px 0px 0px;
//               font-weight: bold;
//               font-size: 16px;
//             }
//             .exhibition-H5_contentCn {
//               background-color: #fff;
//               padding: 0 15px 25px;
//               p {
//                 padding: 10px 0;
//                 border-bottom: 1px solid #ddd;
//                 display: flex;
//                 justify-content: space-between;
//                 span {
//                   color: #999;
//                 }
//               }
//             }
//             .exhibition-H5_contentDn {
//               padding: 20px;
//               background: #fff;
//               position: relative;
//               .contentDn-main {
//                 display: flex;
//                 margin-bottom: 15px;
//                 position: relative;
//                 .exhibition-H5_line {
//                   position: absolute;
//                   top: 22px;
//                   left: 10px;
//                   bottom: -17px;
//                   width: 1px;
//                   background-color: #e9eef2;
//                 }
//                 .contentDn-main_top {
//                   position: relative;
//                   flex-shrink: 0;
//                   margin-right: 10px;
//                   width: 20px;
//                   height: 20px;
//                   border-radius: 50%;
//                   background-color: #cff0e9;
//                   display: flex;
//                   justify-content: center;
//                   align-items: center;
//                   margin-top: 2px;
//                   b {
//                     display: block;
//                     width: 8px;
//                     height: 8px;
//                     border-radius: 50%;
//                     background-color: #5fc7bd;
//                   }
//                 }
//                 .contentDn-main_con {
//                   p {
//                     margin: 6px 0;
//                   }
//                   span {
//                     color: #999;
//                   }
//                 }
//               }
//             }
//           }
//           .exhibition-H5_content + .exhibition-H5_content {
//             margin-top: 10px;
//             position: relative;
//             img {
//               width: 94%;
//               position: absolute;
//               top: -24px;
//               left: 10px;
//             }
//           }
//         }
//       }
//       .exhibition-H5::-webkit-scrollbar {
//         width: 0px;
//       }
//     }
//   }
// }
</style>